<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>

<!-- 1.创建div -->
<div id="china" style="width: 600px;height:400px;"></div>



<script>


    $.ajax({
        url:"${pageContext.request.contextPath}/getChina",
        type:"post",
        success:function (data) {
            buildechart(data);

        }
    })

    function buildechart(data) {
        console.log(data);
        <%-- 2.通过js初始化为echarts实例 --%>
        var myChina = echarts.init(document.getElementById('china'));
//    3.设置图表相关的参数
        var option3 = {
            title : {
                text: '用户地区信息',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:['用户人数']
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                left: 'right',
                top: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '用户人数',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:data
                }
            ]
        };

//    4.将参数设置图表对象
        myChina.setOption(option3)
    }


</script>